<template>
  <div class="root_app">
    <ant-v ref="graphDom"/>
  </div>
</template>
<script setup>
import AntV from '@/components/graph/index.vue'
import {onMounted, ref} from "vue";
import graphData from '@/assets/data3'
import graphData1 from '@/assets/data4'
import graphData2 from '@/assets/data5'
import emitter from "@/utils/emitter.js";
import {ElMessage} from "element-plus";

let graphDom = ref()
let v1Source = null, v2Source = null, v3Source = null;
let newEdges = []
let currentLevel2 = null, currentLevel3 = null
// 当前图谱数据
let currentConfigGraphData = null

// 初始化图谱
async function readyGraph(configGraphData) {
  if (configGraphData.data.nodes.length >= 60) {
    configGraphData.optionsConfig.defaultAutoFit = 'view'
  }
  graphDom.value.initGraph(configGraphData);
}

onMounted(() => {
  // 接收消息
  receiveMessage()
  // 初始化图谱
  // getData(2)
  const data = {
    data: graphData2,
    optionsConfig: {
      isNewData: true,
      bindNodeClick: true,
      layout: "d3Force",
      padding: [80, 80, 80, 80],
      animation: false,
      defaultNodeSize: 40,
      defaultLabelSize: 14,
      defaultNodeFill: null,
      defaultAutoFit: 'center',
    },
    configuration: {
      edgeLabel: null,
      edgeId: null,
      nodeId: "id",
      nodeLabel: "label",
      source: "source",
      target: "target",
      nodeType: 'nodeType'
    }
    }
  readyGraph(data)
  return
  //向父元素发送消息
  setTimeout(() => {
    const params = {
      data: {
        status: 200,
        msg: "iframe已经加载完成"
      },
      signal: 'iframeFinish'
    }
    // 向父页面发送消息
    window.parent.postMessage(params, '*');
  })
})

// 重置数据
function resetData() {
  newEdges = []
  v1Source = null
  v2Source = null
  v3Source = null;
}

// 接收消息
function receiveMessage() {
  //接收父组件的消息
  window.addEventListener('message', function (event) {
    // 处理接收到的消息
    if (event.data.signal && event.data.signal === 'graphData') {
      // 医学院数据
      if (event.data.data === 1) {
        const data = {
          data: graphData1,
          optionsConfig: {
            isNewData: true,
            bindNodeClick: true,
            layout: "d3Force",
            padding: [80, 80, 80, 80],
            animation: false,
            defaultNodeSize: 40,
            defaultLabelSize: 14,
            defaultNodeFill: null,
            defaultAutoFit: 'center',
          },
          configuration: {
            edgeLabel: null,
            edgeId: null,
            nodeId: "id",
            nodeLabel: "name",
            source: "Source",
            target: "Target",
            nodeType: 'type'
          }
        }
        currentConfigGraphData = data
        readyGraph(data)
      } else {
        // 地理数据
        const data = {
          data: graphData,
          optionsConfig: {
            isNewData: true,
            bindNodeClick: true,
            layout: "d3Force",
            padding: [80, 80, 80, 80],
            animation: false,
            defaultNodeSize: 40,
            defaultLabelSize: 14,
            defaultNodeFill: null,
            defaultAutoFit: 'center',
          },
          configuration: {
            edgeLabel: null,
            edgeId: null,
            nodeId: "id",
            nodeLabel: "label",
            source: "source",
            target: "target",
            nodeType: 'nodeType'
          }
        }
        currentConfigGraphData = data
        // 初始化图谱
        getData(data, 2)
      }
    }
  });
  emitter.on('refreshData', (params) => {
    if (params.data.level === 2 && params.data.id !== '9n0hfq') {
      ElMessage.error('待补充数据')
      return
    }
    if (params.data.level === 3 && params.data.id !== '1eembcy') {
      ElMessage.error('待补充数据')
      return
    }

    if (params.data.level === 2) {
      currentLevel3 = null
    }
    if (params.data.level === 1) {
      currentLevel2 = null
    }
    if (params.data.level === 2) {
      currentLevel2 = params.data
    } else if (params.data.level === 3) {
      currentLevel3 = params.data
    }
    resetData()
    let newLevel = params.data.level + 1
    getData(currentConfigGraphData, newLevel)
  })
}

// 获取数据
function getData(params, level) {
  let data = {
    nodes: [],
    edges: []
  }
  data.nodes = graphData.nodes.filter(v => v.level <= level)
  if (currentLevel2) {
    data.nodes = data.nodes.filter(v => {
      return (v.level === 2 && v.id === currentLevel2.id) || v.level !== 2
    })
  }
  if (currentLevel3) {
    data.nodes = data.nodes.filter(v => {
      return (v.level === 3 && v.id === currentLevel3.id) || v.level !== 3
    })
  }
  data.edges = calcEdges(data, level)
  params.data = data
  readyGraph(params)
}

// 计算边
function calcEdges(data, level) {
  let filterNode = data.nodes.filter(v => v.level <= level)
  filterNode.forEach(v => {
    if (v.level === 1 && v1Source === null) {
      v1Source = v
      let items = filterNode.filter(v1 => v1.level === 2)
      items.forEach(v1 => {
        newEdges.push({
          source: v.id,
          target: v1.id,
        })
      })
    }
    if (v.level === 2 && v2Source === null) {
      v2Source = currentLevel2 || v
      let items = filterNode.filter(v1 => v1.level === 3)
      items.forEach(v1 => {
        newEdges.push({
          source: v2Source.id,
          target: v1.id,
        })
      })
    }
    if (v.level === 3 && v3Source === null) {
      v3Source = currentLevel3 || v
      let items = filterNode.filter(v1 => v1.level === 4)
      items.forEach(v1 => {
        newEdges.push({
          source: v3Source.id,
          target: v1.id,
        })
      })
    }
  })
  return newEdges
}
</script>
<style scoped>
.root_app {
  width: 100%;
  height: 100%;
  padding: 20px;
  background: rgba(255, 255, 255, 1);
  backdrop-filter: blur(10px);
  box-sizing: border-box;
  position: relative;
}
</style>
